<!--
 * @Author: zhi1hw hanwei@zhi1tech.com
 * @Date: 2024-07-08 16:10:26
 * @LastEditors: zhi1hw hanwei@zhi1tech.com
 * @LastEditTime: 2024-07-08 16:15:35
 * @FilePath: \code\src\views\common\audioPlayer.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
  <div class="sound-recording">
    <button @click="playAudio">播放音频</button>
    <button @click="pauseAudio">暂停音频</button>
    <button @click="stopAudio">停止音频</button>
  </div>
</template>
    <script setup lang="ts">
import {
  ComponentInternalInstance,
  getCurrentInstance,
  inject,
  onMounted,
  onUnmounted,
  reactive,
  watch,
  defineProps,
  provide,
  ref,
} from "vue";
import { Howl } from "howler";
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const emits = defineEmits(["addVoiceItem"]);
const themeColor: any = inject("themeColor");
const show = ref(false);
const state = reactive({
  sound: null,
});
const playAudio = () => {
  state.sound?.play();
};
const pauseAudio = () => {
  state.sound?.pause();
};
const stopAudio = () => {
  state.sound?.stop();
};
onMounted(() => {
  state.sound = new Howl({
    src: [require("@/assets/horse.ogg")],
    volume: 1.0,
  });
});
</script>
    
  <style lang="scss" scoped>
.area-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: v-bind("themeColor.textColorLighten");
  font-size: 24px;
  img {
    width: 86px;
    margin-bottom: 10px;
    border: 1px dashed v-bind("themeColor.borderColorLighten");
    pointer-events: none;
  }
}
</style>